<template>
  <div ref="charts" class="chart"></div>
</template>

<script>
export default {
  name: "ring",
  props: {
    data: Object,
    option: Object,
  },
  methods: {
    init() {
      let myechart = echarts.init(this.$refs.charts);
      let total = this.data.total,value = this.data.value,percent = (value/total * 100).toFixed(2);

      let option = {
        title: {
          text: this.data.name
            ? this.data.name + "\n" + percent + "%"
            : percent + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontWeight: "normal",
            color: this.option.nameColor || "#29EEF3",
            fontSize: this.option.fontSize ||12,
          },
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: "circle",
            type: "pie",
            clockWise: true,
            radius: this.option.radius || ["90%", "100%"],
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
            hoverAnimation: false,
            data: [
              {
                value: value,
                name: "占比",
                itemStyle: {
                  color: this.option.color || {
                    // 颜色渐变
                    colorStops: [
                      {
                        offset: 0,
                        color: "#4FADFD", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#28E8FA", // 100% 处的颜色1
                      },
                    ],
                  },
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                name: "剩余",
                value: total - value,
                itemStyle: {
                  color: this.option.bgColor || "#E1E8EE",
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };
      myechart.setOption(option, true);
    },
  },
  watch: {
    data: {
      handler: function (val) {
        this.data = val;
        this.init();
      },
      deep: true,
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
